<template>
  <div class="inspection-form-A">
    <div class="sub-tab">
      <div class="sub-tab-item-active">
        <a-icon type="snippets" theme="filled" class="icon" />
      </div>
      <div class="sub-tab-item">
        <a-icon type="camera" theme="filled" class="icon" />
      </div>
    </div>
    <header>
      <p><span class="sm">Job No: </span>{{ headerData.jobNo }}</p>
      <p>
        <span class="sm">AsignedInspector: </span
        >{{ headerData.assignedInspector }}
      </p>
      <p class="lg">{{ headerData.other }}</p>
      <p class="xlg">{{ headerData.part }}</p>
    </header>
    <a-divider></a-divider>
    <div class="index">
      <div class="step">
        <div class="circle-primary"></div>
        <div class="step-item" v-for="item in 6">
          <div class="bar"></div>
          <div class="circle"></div>
        </div>
      </div>
      <div class="form">
        <div class="form-item" v-for="(item, index) in formData">
          <div class="question">{{ item.question }}</div>
          <div class="option" v-for="(item2, index2) in item.option">
            <div
              :class="index2 == 3 ? 'option-item-active' : 'option-item'"
              @click="optionSelect(item2)"
            >
              <a-icon
                type="check-circle"
                theme="twoTone"
                two-tone-color="#52c41a"
                v-if="index2 == 3"
              />
              {{ item2 }}
            </div>
          </div>
          <div class="other">
            <div class="other-item">
              Others<a-input
                placeholder="Please state"
                class="state-input"
                :disabled="isSave ? true : false"
              />
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="question">3. Composition</div>
          <div class="content">
            <div class="content-item">
              <a-input class="input" :disabled="isSave ? true : false" /><span
                >-storey</span
              >
            </div>
            <div class="content-item">
              <a-input
                class="long-input"
                :disabled="isSave ? true : false"
              /><span>purpose</span>
            </div>
            <div class="content-item">
              <a-input class="input" :disabled="isSave ? true : false" /><span
                >-storey</span
              >
            </div>
            <div class="content-item">
              <a-input
                class="long-input"
                :disabled="isSave ? true : false"
              /><span>purpose</span>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="question">4. Facilities Provided</div>
          <a-textarea
            style="font-size: 0.08rem; margin-top: 0.02rem"
            placeholder="Please state"
            :readOnly="isSave ? true : false"
            :rows="4"
          />
        </div>
        <div class="form-item">
          <div class="question">5. Lifts</div>
          <div class="lifts-input">
            <a-input class="input" :disabled="isSave ? true : false" /><span
              >purpose</span
            >
            <a-input class="input" :disabled="isSave ? true : false" /><span
              >Service</span
            >
            <a-input class="input" :disabled="isSave ? true : false" /><span
              >purpose</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="button">
      <a-button class="save-btn" @click="save">Save-Only</a-button>
      <a-button class="mark-btn" @click="mark">Mark as Completed</a-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isSave: false, //是否已保存，如果保存，就设置表单为只读
      headerData: {
        jobNo: "2020/20390/BOC",
        assignedInspector: "Davidv Chow",
        other: "S9 Florissa Park Giffard Mansion",
        part: "Part A: The Subject Building/Land",
      },
      formData: [
        {
          question: "1a. Type of Building/Land Use",
          option: [
            "Residential",
            "Composite",
            "Industrial",
            "Office",
            "Retail",
            "Agricultural",
          ],
          option_select: "",
          other: "",
        },
        {
          question: "1b. Mode of Construction",
          option: ["Reinforce Concrete"],
          other: "",
        },
        {
          question: "1c. External Wall Finish",
          option: [
            "Painted",
            "Tiled",
            "Agricultural",
            "Other",
            "Retail",
            "Agricultural",
          ],
          other: "",
        },
        {
          question: "2.External Condition",
          option: ["Good", "Reasonable", "Poor"],
          other: "",
        },
      ],
    };
  },
  methods: {
    optionSelect(item2) {
      this.formData.option_select = item2;
    },
    save() {
      this.isSave = true;
    },
    mark() {
      this.$router.push("/floorPlanPage");
      console.log(this.$route.path);
    },
  },
};
</script>
<style scoped>
.inspection-form-A {
  width: 100vw;
  padding-bottom: 0.1rem;
}
.sub-tab {
  width: 100vw;
  background-color: #7a838a;
  height: 0.26rem;
  display: flex;
  justify-content: center;
}
.sub-tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sub-tab-item-active {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: solid 0.02rem var(--primary-color);
}
.icon {
  font-size: 0.15rem;
  color: #ffffff;
}
header {
  padding: 0.1rem 0.1rem 0;
}
header p {
  width: 100vw;
  line-height: 0.07rem;
}
.sm {
  color: #abafb2;
}
.lg {
  font-size: 0.08rem;
  font-weight: 600;
}
.xlg {
  font-size: 0.08rem;
  font-weight: 800;
  color: #000;
}
.index {
  width: 100vw;
  display: flex;
  justify-content: space-around;
}
.step {
  width: 10vw;
  height: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.step-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.circle-primary {
  width: 0.08rem;
  height: 0.08rem;
  background-color: var(--primary-color);
  border-radius: 0.04rem;
}
.circle {
  width: 0.08rem;
  height: 0.08rem;
  background-color: #ececec;
  border-radius: 0.04rem;
  margin-top: -0.02rem;
}
.bar {
  margin-top: -0.02rem;
  z-index: -1;
  width: 0.02rem;
  height: 0.16rem;
  background-color: #ececec;
}
.form {
  width: 90vw;
  padding-right: 0.1rem;
  font-size: 0.08rem;
}
.form-item {
  margin-bottom: 0.1rem;
}
.option {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.option-item {
  width: 100%;
  height: 0.15rem;
  background-color: #eeeeee;
  margin: 0.01rem 0;
  line-height: 0.15rem;
  padding-left: 0.1rem;
}
.option-item-active {
  width: 100%;
  height: 0.15rem;
  background-color: var(--primary-color);
  margin: 0.01rem 0;
  line-height: 0.15rem;
  padding-left: 0.1rem;
}
.other-item {
  width: 100%;
  height: 0.36rem;
  background-color: #eeeeee;
  margin: 0.01rem 0;
  line-height: 0.15rem;
  padding: 0 0.06rem 0 0.1rem;
}
.state-input {
  height: 0.15rem;
  font-size: 0.08rem;
}
.content {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0.05rem 0;
}
.input {
  width: 0.16rem;
  margin-right: 0.05rem;
}
.long-input {
  width: 0.32rem;
  margin-right: 0.05rem;
}
.content-item {
  margin-right: 0.1rem;
  margin-bottom: 0.1rem;
}
.lifts-input {
  padding: 0.05rem 0;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.button {
  display: flex;
  justify-content: space-evenly;
}
.mark-btn {
  width: 0.8rem;
  height: 0.24rem;
  font-size: 0.07rem;
  background-color: var(--primary-color);
  color: var(--text-color);
}
.mark-btn:hover {
  color: var(--text-color);
  border-color: var(--primary-color);
}
.save-btn {
  width: 0.8rem;
  height: 0.24rem;
  font-size: 0.07rem;
  background-color: #252839;
  color: #fff;
}
.save-btn:hover {
  color: #fff;
  border-color: #252839;
}
</style>